<template>
  <div :class="['blue-box',showBG ? 'showBG' : '']">
    <div class="title">{{title}}</div>
    <div class="contain">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {

    }
  },
  props:{
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    showBG:{
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="scss">
.blue-box{
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: 500;
  .title{
    height: 5vh;
    line-height: 5vh;
    text-align: center;
  }
  .contain{
    height: calc( 100% - 5vh )
  }
}
.showBG{
  border: 1px solid blue;
}
</style>
